function comment() {
    let el = ""
    fetch('http://chst.vip:1902/students/getstulist')
        .then(body => body.json())
        .then(res => {
            console.log(res);
            res.data.forEach((item, index) => {
                // console.log(item);
                el += `
        <div class="tip1" id="${item.id}">
            <div class="tip_h" title="双击关闭纸条">
                <div class="num">第[${index+1}]条 ${item.time}</div>
                <div class="close" title="关闭纸条">×</div>
                <div class="clr"></div>
            </div>
            <div class="tip_c">
                ${item.content}
            </div>
            <div class="tip_f">
                <div class="icon">
                    <img src="images/bpic_1.gif" alt="" title="">
                </div>
                <div class="name">${item.name}</div>
                <div class="clr"></div>
            </div>
        </div>
        `
            })
            $('#content').html(el)
            //随机位置
            let offsetLeft = $('#content').offset().left
            let offsetTop = $('#content').offset().top
            let maxLeft = offsetLeft + $('#content').width() - $('#content .tip1').width()
            let maxTop = offsetTop + $('#content').height() - $('#content .tip1').height()
            // console.log(maxLeft, maxTop);
            for (let i = 0; i < $('#content').children().length; i++) {
                $('#content').children().eq(i).css({
                    left: Math.ceil(Math.random() * (maxLeft - (offsetLeft - 1)) + (offsetLeft - 1)),
                    top: Math.ceil(Math.random() * (maxTop - (offsetTop - 1)) + (offsetTop - 1)),
                })
            }
            //点击删除事件
            $('#content .tip1 .tip_h .close').click(function () {
                let id = $(this).parent().parent().attr('id')
                var r = confirm("狗子,你真的要删除吗");
                if (r == true) {
                    del(id)
                } else {
                    alert('取消了本次删除')
                }
            })
            // //双击删除
            $('#content .tip1 .tip_h').dblclick(function () {
                let id = $(this).parent().attr('id')
                var r = confirm("狗子,你真的要删除吗");
                if (r == true) {
                    del(id)
                } else {
                    alert('取消了本次删除')
                }
            })
            //删除的方法
            function del(id) {
                console.log(id);
                fetch('http://chst.vip:1902/students/del?id=' + id)
                    .then(body => body.json())
                    .then(res => {
                        console.log(res);
                        if (!res.state) {
                            alert('你来晚了,数据被老六删了')
                        }
                    })
                // $(this).parent().parent().css('display', 'none')
                comment()

            }
            //点击到最前面
            $('#content .tip1').click(function () {
                $(this).css('z-index', '999').siblings().css('z-index', '1')
            })
            // 拖拽
            $('#content .tip1 .tip_h').mousedown(function (e) {
                let offsetX = e.offsetX
                let offsetY = e.offsetY
                let _this = $(this).parent()
                $(document).mousemove(function (e) {
                    let x = e.pageX - offsetX
                    let y = e.pageY - offsetY
                    //边界控制
                    if (x <= offsetLeft) {
                        x = offsetLeft
                    }
                    if (y <= offsetTop) {
                        y = offsetTop
                    }
                    if (x >= maxLeft) {
                        x = maxLeft
                    }
                    if (y >= maxTop) {
                        y = maxTop
                    }
                    // console.log(x, y);
                    _this.css({
                        left: x,
                        top: y
                    })
                })
            })
            $(document).mouseup(() => {
                $(document).off('mousemove')
            })
            //添加评论
            //评论条数
            let n = $('#content').children().length
            // console.log(n);
            $('#comment-box #comment #count b').text(`评论:${n}条`)
            //禁用按钮的方法
            let ipt = document.querySelector('#comment-box #comment #ipt textarea')
            let submitBtn = document.querySelector('#comment-box #comment #ipt .action #submit')

            function disableBtn() {
                let val = ipt.value;
                //非空验证,如果没有输入,禁用按钮
                if (!val) {
                    submitBtn.disabled = true;
                    submitBtn.style.background = "#ccc"
                }
            }
            disableBtn()
            //评论输入框输入事件
            ipt.oninput = function () {
                //解禁按钮
                submitBtn.disabled = false;
                submitBtn.style.background = "hotpink";
                //如果输入的值是空,重新禁用按钮,这个方法会自己判断
                disableBtn()
            }


            // let data = {

            // }
            // fetch("http://chst.vip:1902/students/addlist", {
            //         method: "post",
            //         body: JSON.stringify(data),
            //         headers: {
            //             'content-type': 'application/json'
            //         },
            //         credentials: 'include'
            //     })
            //     .then(body => body.json())
            //     .then(res => {
            //         console.log(res)
            //     })
            //点击提交事件处理函数
            function submitComment() {
                //获取输入框的值
                let content = ipt.value;
                //弹出确认输入框,输入昵称
                let name = prompt('请输入你的昵称');
                if (!name) {
                    alert('昵称不能输入为空')
                    return
                }
                //发送ajax 提交评论
                $.ajax({
                    url: "http://chst.vip:1902/students/addlist",
                    type: 'post',
                    data: {
                        content,
                        name
                    }
                }).then(res => {
                    //如果添加成功 更新视图
                    if (res.state) {
                        comment()
                    } else {
                        //提示错误
                        alert('提交出错')
                    }
                }).then(()=>{
                    $('textarea').val("")
                })
            }
            //点击事件
            submitBtn.onclick = submitComment;
            //按回车提交
            document.onkeydown = function (e) {
                if (e.keyCode === 13 && !submitBtn.disabled) { //回车的时候 按钮不能是禁用状态
                    submitComment()
                }
            }
        })
}
let x = comment()